{% extends 'main_hub/user_base.html' %}

{% block title %}
    个人信息页
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="/static/css/jquery.Jcrop.min.css">
{% endblock %}


{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-md-6" align="center" style="top: 70px">
                <img src="{{ MEDIA_URL }}{{ user.image }} " style="width: 100px; height: 100px;border-radius:50px">
                <br>
                <br>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#change_pic"
                        data-whatever="@mdo">更改头像
                </button>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#change_pwd"
                        data-whatever="@mdo">修改密码
                </button>

            </div>
            <div class="col-md-6">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">用户名: &nbsp; {{ user.username }}</li>
                    <li class="list-group-item">昵 &nbsp; 称: &nbsp;
                        {% if user.nick_name %}{{ user.nick_name }}{% else %}<span>无</span>{% endif %}</li>
                    <li class="list-group-item">性 &nbsp; 别: &nbsp;
                        {% if user.get_gender_display %}{{ user.get_gender_display }}{% else %}<span>无</span>{% endif %}
                    </li>
                    <li class="list-group-item">手 &nbsp; 机: &nbsp;
                        {% if user.mobile %}{{ user.mobile }}{% else %}<span>无</span>{% endif %}</li>
                    <li class="list-group-item">生 &nbsp; 日: &nbsp;
                        {% if user.birthday.date %}{{ user.birthday.date }}{% else %}<span>无</span>{% endif %}</li>
                    <li class="list-group-item">邮 &nbsp; 箱: &nbsp;
                        {% if user.email %}{{ user.email }}{% else %}<span>无</span>{% endif %}</li>
                    <li class="list-group-item">地 &nbsp; 址: &nbsp;
                        {% if user.address %}{{ user.address }}{% else %}<span>无</span>{% endif %}</li>
                    <li class="list-group-item">实&nbsp;&nbsp;&nbsp;名:&nbsp;&nbsp;
                        {% if user.is_certificate %}已认证&nbsp;<i class="bi bi-patch-check text-success"></i>{% else %}
                            未认证&nbsp;<i class="bi bi-x-circle text-danger"></i>{% endif %}</li>
                </ul>
                <hr>
                <button type="button" style="margin: 5px" class="btn btn-primary" data-toggle="modal" data-target="#change_info"
                        data-whatever="@mdo">修改个人信息
                </button>
                <button type="button" style="margin: 5px" class="btn btn-primary" data-toggle="modal"
                        data-target="#setQuestions"
                        data-whatever="@mdo">设定密保
                </button>
                <button type="button" class="btn btn-primary" {% if request.user.email %} disabled{% endif %}
                        data-toggle="modal" style="margin: 5px"
                        data-target="#emailBoundModel"
                        data-whatever="@mdo">绑定邮箱
                </button>
                <button type="button" class="btn btn-primary" disabled data-toggle="modal"
                        data-target="#" style="margin: 5px"
                        data-whatever="@mdo">绑定手机
                </button>
                <button type="button" class="btn btn-primary"
                        data-toggle="modal" style="margin: 5px"
                        data-target="#{% if not user.is_certificate %}certification{% endif %}"
                        {% if user.is_certificate %}onclick="window.location.href='{% url 'live_setting' %}'" {% endif %}
                        data-whatever="@mdo">直播中心
                </button>
                {% if not user.is_certificate %}
                    <button type="button" class="btn btn-primary"
                            data-toggle="modal" style="margin: 5px"
                            data-target="#certification"
                            data-whatever="@mdo">实名认证
                    </button>
                {% endif %}
            </div>
        </div>
    </div>

    {#    绑定邮箱弹窗#}
    {% if not request.user.email %}
        <div class="modal fade" id="emailBoundModel" tabindex="-1" aria-labelledby="exampleModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="emailBoundHead">邮箱注册</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="emailBoundForm">
                            <div class="form-group">
                                <label for="email" class="col-form-label">邮箱:</label>
                                <input type="text" class="form-control" id="email" name="email" placeholder="输入邮箱"
                                       autocomplete="off">
                            </div>
                            <div class="modal-footer">
                                <div id="emailBoundError" class="text-danger"></div>
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                <button type="submit" class="btn btn-primary" id="emailBoundButton"
                                        onclick="operation('#emailBoundForm','#emailBoundButton','{% url 'bound_email' %}','#emailBoundError')">
                                    绑定
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    {#    设定密保弹窗#}
    <div class="modal fade" id="setQuestions" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="secret_head">密保设定 &nbsp;</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="selectForm">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <label class="input-group-text" for="selectQuestion">选择密保问题</label>
                            </div>
                            <select class="custom-select" id="selectQuestion" name="question">
                                {% for secret in all_secret %}
                                    <option value="{{ secret.id }}">{{ secret.question }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group mb-3">
                            <label for="userAnswer" class="col-form-label">您的答案:<span
                                    class="text-danger">(请牢记您的答案)</span></label>
                            <input type="text" class="form-control" id="userAnswer" name="answer">
                        </div>
                        <div class="form-group mb-3">
                            <div class="alert alert-danger" role="alert">
                                你目前已经设定 <b>{{ user_secret.count }}</b> 个密保问题，请设置 <b>5</b> 个及以上，否则找回密码时不可用
                            </div>
                        </div>
                        <div class="modal-footer">
                            <div id="secretError" class="text-danger"></div>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <button id="secretButton" type="submit" class="btn btn-primary"
                                    onclick="operation('#selectForm','#secretButton','{% url 'save_secret' %}', '#secretError')">
                                确定
                            </button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>

    {#    实名认证弹窗#}
    {% if not user.is_certificate %}
        <div class="modal fade" id="certification" tabindex="-1" aria-labelledby="exampleModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">实名认证</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="real_name_authentication_form">

                            <div class="form-group">
                                <label for="recipient-name" class="col-form-label">姓名:</label>
                                <input class="form-control" type="text" id="real_name" name="real_name"
                                       required
                                       placeholder="姓名" autocomplete="off">
                            </div>

                            <div class="form-group">
                                <label for="recipient-name" class="col-form-label">身份证号:</label>
                                <input class="form-control" type="text" id="identify_card" name="identify_card"
                                       required
                                       placeholder="身份证号" autocomplete="off">
                            </div>

                            <div class="modal-footer">
                                <div id="real_name_authentication_error" class="text-danger"></div>
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                <button type="submit" class="btn btn-primary" id="real_name_authentication_button"
                                        onclick="operation('#real_name_authentication_form','#real_name_authentication_button','{% url 'real_name' %}','#real_name_authentication_error')">
                                    提交
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    {#    修改头像弹窗#}
    <div class="modal fade" id="change_pic" tabindex="-1" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">更换头像</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="chang_pic" enctype="multipart/form-data">
                        <div class="input-group mb-3">
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="id_image" name="image" accept="image/*"
                                       onchange="CheckFile(this,['jpg', 'png','webp'])">
                                <label class="custom-file-label" for="id_image"
                                       aria-describedby="inputGroupFileAddon02">选择文件</label>
                            </div>
                            <div class="input-group mb-3 justify-content-center" id="cut-img-cont"
                                 style="margin-top: 10px">
                            </div>
                        </div>
                        <div id="img-detail">

                        </div>
                        <div class="modal-footer">
                            <div id="change_pic_error" class="text-danger"></div>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary" id="change_pic_button"
                                    onclick="UploadImg('#chang_pic','#change_pic_button','{% url 'change_pic' %}','#change_pic_error')">
                                保存头像
                            </button>
                        </div>
                    </form>
                    <div id="cut-form">
                    </div>
                </div>
            </div>
        </div>
    </div>

    {#  修改密码弹窗  #}
    <div class="modal fade" id="change_pwd" tabindex="-1" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">更换密码</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="change_password_form">
                        <div class="form-group">
                            <label for="old_password" class="col-form-label">旧密码:</label>
                            <input class="form-control" type="password" id="old_password" name="old_password" required
                                   placeholder="旧密码" autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label for="new_password" class="col-form-label">新密码:</label>
                            <i class="bi bi-question-circle text-secondary"
                               title="密码（8~16）位，包括至少一位大写字母，一位小写字母，一个数字，一个特殊字符"></i>
                            <input class="form-control" type="password" id="new_password" name="new_password" required
                                   placeholder="新密码" autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label for="new_check_password" class="col-form-label">重复密码:</label>
                            <i class="bi bi-question-circle text-secondary"
                               title="密码（8~16）位，包括至少一位大写字母，一位小写字母，一个数字，一个特殊字符"></i>
                            <input class="form-control" type="password" id="new_check_password"
                                   name="new_check_password" required
                                   placeholder="重复密码" autocomplete="off">
                        </div>
                        <div class="modal-footer">
                            <div id="change_pwd_error" class="text-danger"></div>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary" id="change_pwd_button"
                                    onclick="operation('#change_password_form','#change_pwd_button','{% url 'change_password' %}','#change_pwd_error')">
                                提交
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {#  修改个人信息弹窗  #}
    <div class="modal fade" id="change_info" tabindex="-1" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">更换个人信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="change_info_form">
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">昵称:</label>
                            <input class="form-control" type="text" id="nick_name" name="nick_name" maxlength="8"
                                   placeholder="请输入昵称" autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">生日:</label>
                            <input class="form-control" type="date" id="birthday" name="birthday"
                                   autocomplete="off">
                        </div>

                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">地址:</label>
                            <input class="form-control" type="text" id="address" name="address" maxlength="200"
                                   placeholder="请输入地址" autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">性别:</label>
                            <div class="form-check form-check-inline">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <input class="form-check-input" type="radio" name="gender" id="gender1"
                                       value="male" checked>
                                <label class="form-check-label" for="inlineRadio1">男</label>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <input class="form-check-input" type="radio" name="gender" id="gender2"
                                       value="female">
                                <label class="form-check-label" for="inlineRadio1">女</label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <div class="text-danger" id="change_info_error"></div>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary" id="change_info_button"
                                    onclick="operation('#change_info_form','#change_info_button','{% url 'change_info' %}','#change_info_error')">
                                提交
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {# 收藏，关注 #}
    <div class="container">
        <hr>
        <div class="row">
            <div class="col-md-11">
                <h4>{% ifequal fav_type 'video' %}我的收藏{% else %}我的关注{% endifequal %}</h4>
            </div>
            <div class="col-md-1">
                <a style="right:70%" href="{% url 'user_fav' %}">more>></a>
            </div>
        </div>

        <nav class="nav nav-pills nav-fill">
            <a class="nav-link {% ifequal fav_type 'video' %}active{% endifequal %}"
               href="{% url 'user' %}?page_name=user&fav_type=video">视频</a>
            <a class="nav-link {% ifequal fav_type 'user' %}active{% endifequal %}"
               href="{% url 'user' %}?page_name=user&fav_type=user">用户</a>
        </nav>

        {% ifequal fav_type 'video' %}
            {#    显示收藏的视频#}
            {% if all_videos %}
                <div class="row">
                    {% for video in all_videos %}
                        <div style="margin: 10px">
                            <div class="card" style="width:12rem;">
                                <a href="{% url 'video_detail' video.id %}?video_sub_number=1">
                                    <img class="card-img-top" src="{{ MEDIA_URL }}{{ video.image }}"
                                         style="width: 12rem">
                                </a>
                                <div class="card-body">
                                    <h5 class="card-title info">
                                        <a href="{% url 'video_detail' video.id %}?video_sub_number=1"
                                           style="text-decoration:none;color:black;font-size: 15px;font-weight: bold">
                                            {% if video.name|length > 8 %}
                                                {{ video.name|slice:'0:8' }}...
                                            {% else %}
                                                {{ video.name }}
                                            {% endif %}</a>
                                    </h5>
                                    <p class="card-text">
                                        {% if video.info|length > 9 %}
                                            {{ video.info|slice:'0:8' }}...
                                        {% else %}
                                            {{ video.info }}
                                        {% endif %}</p>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <br>
                <h5 style="color: darkslategrey">您还没有收藏视频</h5>
            {% endif %}

        {% else %}
            {% if all_star %}
                <div class="row">
                    {% for star in all_star %}
                        <div class="col-md-2" style="margin: 10px;">
                            <div class="card" style="width: 100px; height: 100px;border-radius:50px">
                                <a href="{% url 'detail_user' %}?username={{ star.username }}">
                                    <img class="card-img-top" src="{{ MEDIA_URL }}{{ star.image }}"
                                         style="width: 100px; height: 100px;border-radius:50px">
                                </a>
                                <a href="{% url 'detail_user' %}?username={{ star.username }}"
                                   style="text-decoration:none;color:black">
                                    <br>
                                    {% if star.nick_name %}
                                        {% if star.nick_name|length > 5 %}
                                            {{ star.nick_name|slice:"0:5" }}...
                                        {% else %}
                                            {{ star.nick_name }}
                                        {% endif %}
                                    {% else %}
                                        {% if star.username|length > 5 %}
                                            {{ star.username|slice:"0:5" }}...
                                        {% else %}
                                            {{ star.username }}
                                        {% endif %}
                                    {% endif %}
                                </a>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <br>
                <h5 style="color: darkslategrey">您还没有关注用户</h5>
            {% endif %}
        {% endifequal %}
    </div>
    <br>
    <br>

    {#    历史记录#}
    <div class="container">
        <hr>
        <div class="row">
            <div class="col-md-11">
                <h4>历史记录</h4>
            </div>
            <div class="col-md-1">
                <a href="{% url 'user_history' %}">more>></a>
            </div>
        </div>
        <div class="row">
            {% if not all_video_history %}
                <div class="col-auto">
                    <br>
                    <h5 style="color: darkslategrey">您还没有观看过视频</h5>
                </div>
            {% else %}
                {% for history in all_video_history %}
                    <div style="margin: 10px">
                        <div class="card" style="width:12rem;">
                            <a href="{% url 'video_detail' history.video.id %}?video_sub_number={{ history.sub }}">
                                <img class="card-img-top" src="{{ MEDIA_URL }}{{ history.video.image }}"
                                     style="width: 12rem">
                            </a>
                            <div class="card-body">
                                <h5 class="card-title info">
                                    <a href="{% url 'video_detail' history.video.id %}?video_sub_number=1"
                                       style="text-decoration:none;color:black;font-size: 15px;font-weight: bold">
                                        {% if history.video.name|length > 8 %}
                                            {{ history.video.name|slice:'0:8' }}...
                                        {% else %}
                                            {{ history.video.name }}
                                        {% endif %}</a>
                                </h5>
                                <p class="card-text">
                                    {% if history.video.info|length > 9 %}
                                        {{ history.video.info|slice:'0:8' }}...
                                    {% else %}
                                        {{ history.video.info }}
                                    {% endif %}</p>
                                <button type="button" class="btn btn-primary">第{{ history.sub }}集</button>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            {% endif %}
        </div>

    </div>
    <hr>

{% endblock %}


{% block custom_jss %}
    <script type="text/javascript" src="/static/js/jquery.Jcrop.min.js"></script>
    <script>

        {#    ajax 图片上传 #}

        function UploadImg(form_id, submit_button, url, error_id) {
            var formData = new FormData($(form_id)[0]);
            $.ajax(
                {
                    type: 'POST',
                    url: url,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    data: formData,
                    beforeSend: function (xhr, setting) {
                        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                        $(submit_button).attr({disabled: "disabled"});
                    },
                    success: function (data) {
                        if (data.status == 'fail') {
                            $(error_id).html(data.msg);
                        } else if (data.status == 'success') {
                            if (data.msg) {
                                alert(data.msg);
                            }
                            window.location.reload();
                        }
                    },
                    complete: function () {
                        $(submit_button).removeAttr('disabled');
                    },
                }
            )
        }

        //建立一个可存取到该file的url
        function getObjectURL(file) {
            var url = null;
            // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
            if (window.createObjectURL != undefined) {   // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) {        // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) {  // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }

        function CheckFile(obj, TypeArray) {
            var fil_src = getObjectURL(obj.files[0]);
            var fileName = $(obj).val();
            $(obj).next('.custom-file-label').html(fileName);
            var array = TypeArray; //可以上传的文件类型
            if (obj.value == '') {
                alert("选择要上传的文件!");
                return false;
            } else {
                var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3];
                var isExists = false;
                for (var i in array) {
                    if (fileContentType.toLowerCase() == array[i].toLowerCase()) {
                        isExists = true;
                        {#展示图片#}
                        html = '<img id="cut-image" src="' + fil_src + '" style="width: 300px">';
                        formq = '<input id="x" name="x" type="hidden">\n' +
                            '<input id="y" name="y" type="hidden">\n' +
                            '<input id="x2" name="x2" type="hidden">\n' +
                            '<input id="y2" name="y2" type="hidden">\n' +
                            '<input id="iw" name="iw" type="hidden">';

                        $('#img-detail').html('');
                        $('#img-detail').append(formq);
                        $('#cut-img-cont').html('');
                        $('#cut-img-cont').html(html);
                        $('#cut-image').Jcrop({
                            aspectRatio: 1,
                            minSize: [76, 76],
                            setSelect: [0, 0, 76, 76],
                            onChange: updateCoords,
                            onSelect: updateCoords
                        }, function () {

                        });

                        var imgW = document.getElementById('cut-image').style.width;
                        $('#iw').val(imgW);

                        function updateCoords(c) {
                            $('#x').val(c.x);
                            $('#y').val(c.y);
                            $('#x2').val(c.x2);
                            $('#y2').val(c.y2);
                        }
                    }
                }
                if (isExists == false) {
                    $(obj).next('.custom-file-label').html('选择文件');
                    alert("上传文件类型不正确!");
                    return false;
                }
                return false;
            }
        }
    </script>
{% endblock %}
